<script setup>


const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入消息...'
  }
});

const emit = defineEmits(['update:modelValue', 'send']);

const updateValue = (event) => {
  emit('update:modelValue', event.target.value);
};

const sendMessage = () => {
  emit('send');
};
</script>

<template>
  <div class="chat-input">
    <McInput
      :value="modelValue"
      :placeholder="placeholder"
      @input="updateValue"
      @keyup.enter="sendMessage"
    />
    <McButton @click="sendMessage" type="primary">发送</McButton>
  </div>
</template>

<style scoped>
.chat-input {
  display: flex;
  padding: 15px;
  background-color: #f0f2f5;
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 8px 8px;
}

.chat-input :deep(.d-input) {
  flex: 1;
  margin-right: 10px;
}
</style>